<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="commons/html-header"></div>
	</head>
	<body class="skin-1">

	<div th:replace="commons/head"></div>



	<div class="main-container" id="main-container">

		<script type="text/javascript">

			try{gds.settings.check('main-container' , 'fixed')}catch(e){}

		</script>

		<div class="main-container-inner">

			<a class="menu-toggler" id="menu-toggler" href="#">

				<span class="menu-text"></span>

			</a>



			<div th:replace="admin/admin-menu"></div>

			<div class="main-content">

				<div class="breadcrumbs" id="breadcrumbs">

					<script type="text/javascript">

						try{gds.settings.check('breadcrumbs' , 'fixed')}catch(e){}

					</script>



					<ul class="breadcrumb">
						<li>
							<i class="icon-home home-icon"></i>
							<a href="#">Home</a>
						</li>
						<li>
							<a>系统管理</a>
						</li>
						<li>
							账号管理
						</li>
					</ul><!-- .breadcrumb -->

				</div>
				<div class="page-content">

					<div class="page-header">
						<form class="form-inline" role="form">
							<div class="form-group">
								<label class="sr-only" for="c_USER_NAME">登录账号</label>
								<input type="text" class="form-control" id="c_USER_NAME" placeholder="请输入登录账号/邮箱" />
							</div>
							<div class="form-group">
								<label class="sr-only" for="c_USER_STATUS">状态</label>
								<select class="form-control" id="c_USER_STATUS">
									<option value=""> 全部 </option>
									<option th:each="dict:${userStatusList}" th:value="${dict.c_DICT_ITEM_VALUE}" th:text="${dict.c_DICT_ITEM_NAME}"></option>
								</select>
							</div>
							<div class="form-group">
								<label class="sr-only" for="c_USER_STATUS">所属厂家</label>
								<select class="form-control" id="c_COMPANY_ID">
									<option value=""> 全部 </option>
									<option th:each="com:${companyList}" th:value="${com.c_COMPANY_ID}" th:text="${com.c_COMPANY_NAME}"></option>
								</select>
							</div>
							<button type="button" id="btn-search" class="btn btn-sm btn-info"><i class="icon-search"></i>查询</button>
							<button type="button" id="btn-add" class="btn btn-sm btn-primary pull-right"><i class="icon-plus"></i>新增账号</button>
						</form>

					</div>

					<div class="row">

						<div class="col-xs-12">
							<div class="table-responsive">

								<table id="tbl" class="table table-striped table-bordered table-hover">
									<thead>
									<tr>

										<th class="center">序号</th>
										<th>用户名</th>
										<th>EMail</th>
										<th>角色</th>
										<th>关联厂家</th>
										<th>状态</th>
										<th>创建时间</th>
										<th>最近一次登录</th>
										<th colspan="4"></th>
									</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div><!-- /.table-responsive -->
						</div><!-- /.col -->

					</div><!-- /.row -->

				</div><!-- /.page-content -->

			</div><!-- /.main-content -->

		</div><!-- /.main-container-inner -->

		<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
						</h4>
					</div>
					<div class="modal-body">
						<form name="edit_form" action="/users/save" method="post" class="form-horizontal">
							<input class="form-control" name="c_USER_ID" autocomplete="off" type="hidden" id="md_C_USER_ID" />
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_LOGIN_NAME">登录名</label>
								<div class="col-sm-9">
									<input class="form-control" name="c_LOGIN_NAME" type="text" id="md_C_LOGIN_NAME" placeholder="请输入登录名称" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_USER_EMAIL">邮箱</label>
								<div class="col-sm-9">
									<input  data-rel="tooltip" title="" data-placement="bottom"  class="form-control" name="c_USER_EMAIL" type="text" id="md_C_USER_EMAIL" placeholder="请输入邮箱                         " />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_ROLE_ID">角色</label>
								<div class="col-sm-9">
									<select class="form-control" name="c_ROLE_ID" id="md_C_ROLE_ID">
										<option value="">请选择角色</option>
										<option th:each="role:${roleList}" th:value="${role.c_ROLE_ID}" th:text="${role.c_ROLE_NAME}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_COMPANY_ID">关联厂家</label>
								<div class="col-sm-9">
									<select class="form-control" name="c_COMPANY_ID" id="md_C_COMPANY_ID">
										<option value="">请选择厂家</option>
										<option th:each="com:${companyList}" th:value="${com.c_COMPANY_ID}" th:text="${com.c_COMPANY_NAME}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_USER_REMARK">描述</label>
								<div class="col-sm-9">
									<textarea style="resize: none;" rows="6" class="form-control" type="text" name="c_USER_REMARK" id="md_C_USER_REMARK" placeholder="请输入描述"/>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消
						</button>
						<button type="button" id="btn-save" class="btn btn-sm btn-primary">
							保存
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<div class="modal fade" id="update_pwd_modal" tabindex="-1" role="dialog" aria-labelledby="update_pwd_title" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="update_pwd_title">
							重置密码
						</h4>
					</div>
					<div class="modal-body">
						<form id="update_pwd_form" name="edit_form"  method="post" class="form-horizontal">
							<input class="form-control" name="c_USER_ID" autocomplete="off" type="hidden" id="pwd_C_USER_ID" />
							<div class="form-group">
								<label class="col-sm-3 control-label" for="c_NEW_PWD">用户密码</label>
								<div class="col-sm-9">
									<input class="form-control" name="c_NEW_PWD" type="password" id="c_NEW_PWD" placeholder="请输入用户密码" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消
						</button>
						<button type="button" id="btn-save-pwd" class="btn btn-sm btn-primary">
							保存
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="icon-double-angle-up icon-only bigger-110"></i>
		</a>

	</div><!-- /.main-container -->



	<!-- basic scripts -->
	<div th:replace="commons/html-js"></div>

	<!-- inline scripts related to this page -->
	<script>
        // <![CDATA[
        $('#update_pwd_form').bootstrapValidator({
            message: 'This value is not valid',
            excluded: ':disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                c_NEW_PWD: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 10,
                            max: 32,
                            message: '密码为10-32位字符'
                        },regexp: {
                            regexp: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~#\^$@$!%*?&\.])[A-Za-z\d~#$\^@$!%*?&\.]{7,}$/,
                            message: '密码必须包含英文字母，数字及特殊字符（~!@#$%^&*.?）'
                        }
                    }
                }
            }
        }).on('error.form.bv', function (e) {
            console.log('error');

            // Active the panel element containing the first invalid element
            var $form = $(e.target),
                validator = $form.data('bootstrapValidator'),
                $invalidField = validator.getInvalidFields().eq(0),
                $collapse = $invalidField.parents('.collapse');

            $collapse.collapse('show');
        });
        // ]]>
	</script>

	<script>
		var c_USER_NAME;
		var c_USER_STATUS;
		var c_COMPANY_ID;
		var dataList = null;
		var button_edit = '<button class="btn btn-xs btn-info" onclick="updateUser(\'{{0}}\')" >' +
            '<i class="icon-edit bigger-120"></i>修改 ' +
            '</button> ';
		var button_lock = '<button class="btn btn-xs btn-warning" onclick="updateUserStatus(\'{{0}}\',\'lock\')" >' +
            '<i class="icon-lock bigger-120"></i>锁定 ' +
            '</button> ';
        var button_locked = '<button class="btn btn-xs btn-warning"  onclick="updateUserStatus(\'{{0}}\',\'unlock\')" >' +
            '<i class="icon-lock bigger-120"></i>解锁 ' +
            '</button> ';
        var button_pwd = '<button class="btn btn-xs btn-success" onclick="updatePwd(\'{{0}}\')" >' +
            '<i class="icon-lock bigger-120"></i>重置密码 ' +
            '</button> ';
        var button_unable = '<button class="btn btn-xs btn-warning" onclick="updateUserStatus(\'{{0}}\',\'unable\')" >' +
            '<i class="icon-lock bigger-120"></i>禁用 ' +
            '</button> ';
		var button_del = '<button class="btn btn-xs btn-danger"  onclick="delUser(\'{{0}}\')" > ' +
            '<i class="icon-trash bigger-120"></i>删除 ' +
            '</button> ';
		var lastTD ='<td class="clearfix" colspan="4">';
		var lastTDEnd = '</td>';
		queryForList = function() {
		    $.post(contextPath + "/users/list" , {c_USER_NAME : c_USER_NAME,c_USER_STATUS:c_USER_STATUS,c_COMPANY_ID : c_COMPANY_ID} , function (data) {
		        var html = '';
		        //<![CDATA[
				if (null != data && data.length > 0) {
                    dataList = data;
				   for (var i = 0; i<data.length; i ++) {
                       html += '<tr>';
				       html += ('' +
					   '<td class="center">' + (i+1) + '</td>' +
					   '<td><div title="' + data[i].c_LOGIN_NAME + '">' + data[i].c_LOGIN_NAME + '</div></td>' +
					   '<td><div title="' + data[i].c_USER_EMAIL + '">' + data[i].c_USER_EMAIL + '</div></td>' +
					   '<td rid="' + data[i].c_ROLE_ID + '"><div title="' + data[i].c_ROLE_NAME + '">' + data[i].c_ROLE_NAME + '</div></td>' +
					   '<td cid="' + data[i].c_COMPANY_ID + '"><div title="' + data[i].c_COMPANY_NAME + '">' + data[i].c_COMPANY_NAME + '</div></td>' +
					   '<td cid="' + data[i].c_STATUS + '"><div title="' + data[i].c_USER_STATUS + '">' + data[i].c_USER_STATUS + '</div></td>' +
					   '<td><div title="' + data[i].c_CREATE_TIME + '">' + data[i].c_CREATE_TIME + '</div></td>' +
					   '<td><div title="' + (null == data[i].c_LAST_LOGIN_TIME ? '' : data[i].c_LAST_LOGIN_TIME) + '">' + (null == data[i].c_LAST_LOGIN_TIME ? '' : data[i].c_LAST_LOGIN_TIME) + '</div></td>');
				       html += lastTD;
				       if ('USER_STATUS_UNABLE' != data[i].c_STATUS) {
                           html += button_edit.replace(/\{\{0\}\}/gi,data[i].c_USER_ID);

						   html += button_pwd.replace(/\{\{0\}\}/gi,data[i].c_USER_ID);
                           if ('1' != data[i].c_IS_DEFAULT) {
                               if ('USER_STATUS_LOCKED' == data[i].c_STATUS) {
                                   html += button_locked.replace(/\{\{0\}\}/gi,data[i].c_USER_ID);
                               } else {
                                   html += button_lock.replace(/\{\{0\}\}/gi,data[i].c_USER_ID);
                               }
                               html += (button_unable + button_del).replace(/\{\{0\}\}/gi,data[i].c_USER_ID);
						   }
					   } else {
                           html += button_del.replace(/\{\{0\}\}/gi, data[i].c_USER_ID);
                       }
				       html += lastTDEnd;
                       html += '</tr>';
				   }

				}
				// ]]>
				$("#tbl tbody").html(html);
            })
		};
		initEditModal = function (title,id,loginName,email,roleId,companyId, remark) {
            $("#md_C_USER_ID").val(id);
            $("#md_C_LOGIN_NAME").val(loginName);
            $("#md_C_ROLE_ID").val(roleId);
            $("#md_C_COMPANY_ID").val(companyId);
            $("#md_C_USER_EMAIL").val(email);
            $("#md_C_USER_REMARK").val(remark);
            $("#myModalLabel").text(title);
            if(null == id) {
                $("#md_C_USER_EMAIL").prop("title","新增账号将会发送密码到邮箱，请谨慎填写!");
                $("#md_C_USER_EMAIL").tooltip({container:'body'});
			} else {
                $("#md_C_USER_EMAIL").attr("title","");
			}
            $("#edit_modal").modal();
        };
        updateUser = function (c_USER_ID) {
			var loginName,email,roleId,companyId,remark,isDefault;
			// <![CDATA[
			if (null != dataList && dataList.length > 0)
			$(dataList).each(function(index, obj) {
			    if (obj.c_USER_ID == c_USER_ID) {
                    loginName = obj.c_LOGIN_NAME;
                    email = obj.c_USER_EMAIL;
                    roleId = obj.c_ROLE_ID;
                    companyId = obj.c_COMPANY_ID;
                    remark = obj.c_USER_REMARK;
                    isDefault = obj.c_IS_DEFAULT;
				}
			});
			if (null != loginName ) {
			    this.initEditModal("修改账号",c_USER_ID,loginName,email,roleId,companyId, remark);
			    $("#md_C_LOGIN_NAME").attr("readonly" , "readonly");
			    if(isDefault) {
			        $("#md_C_COMPANY_ID").attr("onfucus" , "$(this).val('"+companyId+"')");
			        $("#md_C_COMPANY_ID").attr("onchange" , "$(this).val('"+companyId+"')");
			        $("#md_C_ROLE_ID").attr("onfucus" , "$(this).val('"+roleId+"')");
			        $("#md_C_ROLE_ID").attr("onchange" , "$(this).val('"+roleId+"')");
				}
			}
			// ]]>
        };
        updateUserStatus = function (c_USER_ID , type) {

            bootbox.confirm({
                buttons: {
                    confirm: {
                        label: '确定',
                        className: 'btn-sm btn-primary'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-sm btn-smbtn-default'
                    }
                },
                title :"确认",
                message :'确定'+ (type =='lock' ? '锁定' : type =="unlock" ? '解锁' : '禁用') +'账户？',
                size: 'small',
                callback : function (result) {
                    if (result) {
                        $.post(contextPath + "/users/" + c_USER_ID + "/" + type, function (data) {
                            var ok = false;
                            if (null != data) {
                                if (0 == data.code) {
                                    queryForList();
                                    ok = true;
                                }
                            }
                            if (!ok) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">'+ (type =='lock' ? '锁定' : type =="unclock" ? '解锁' : '禁用') +'失败</span>',
                                    buttons: {
                                        "danger": {
                                            "label": "确定",
                                            "className": "btn-sm btn-danger"
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
            });
            //<![CDATA[
		// ]]>
        };
        delUser = function (c_USER_ID) {
		//<![CDATA[
			bootbox.confirm({
                buttons: {
                    confirm: {
                        label: '确定',
                        className: 'btn-sm btn-primary'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-sm btn-smbtn-default'
                    }
                },
                title : "<i class='icon-question-sign'></i> 确认",
			    message :'确定删除账户？',
                size: 'small',
				callback : function (result) {
                    if (result) {
                        $.post(contextPath + "/users/" + c_USER_ID + "/delete", function (data) {
                            var ok = false;
                            if (null != data) {
                                if (0 == data.code) {
                                    queryForList();
                                    ok = true;
                                }
                            }
                            if (!ok) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">删除失败</span>',
                                    buttons: {
                                        "danger": {
                                            "label": "确定",
                                            "className": "btn-sm btn-danger"
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
			})
//            ]]>
        };
        updatePwd = function (c_USER_ID) {
			$("#update_pwd_modal").modal();
			$("#pwd_C_USER_ID").val(c_USER_ID);
			$("#c_NEW_PWD").val('');
        };
		$(document).ready(function () {

		    queryForList(null);
			$("#btn-search").on("click" , function () {
                c_USER_NAME = $("#c_USER_NAME").val();
                c_USER_STATUS = $("#c_USER_STATUS").val();
                c_COMPANY_ID = $("#c_COMPANY_ID").val();
				queryForList();
            });
			$("#btn-add").on("click" , function () {
			    $("#md_C_LOGIN_NAME").removeAttr("readonly");
				initEditModal("新增账号");
            });
            $("#btn-save").on("click",function () {
                $.post(contextPath + '/users/save',$("form[name=edit_form]").serializeArray(), function (data) {
                        //<![CDATA[
                        if (null != data) {
                            if (0 == data.code) {
                                $("#edit_modal").modal('hide');
                                queryForList()
                            } else if ( 500 == data.code) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">' + data.msg + '</span>',
                                    buttons:
                                        {
                                            "danger" :
                                                {
                                                    "label" : "确定",
                                                    "className" : "btn-sm btn-danger"
                                                }
                                        }
                                });
							}
                        }
                        return false;
                        // ]]>
                    });
                return false;
            });

            $("#btn-save-pwd").on("click" , function () {
                if ($("#update_pwd_form").data('bootstrapValidator').validate().isValid()) {
                    $.post(contextPath + '/users/' + $("#pwd_C_USER_ID").val() + "/updatePwd", {c_USER_PWD: $("#c_NEW_PWD").val()}, function (data) {
                        //<![CDATA[
                        if (null != data) {
                            if (0 == data.code) {
                                $("#update_pwd_modal").modal('hide');
                                queryForList()
                            } else if (500 == data.code) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">' + data.msg + '</span>',
                                    buttons: {
                                        "danger": {
                                            "label": "确定",
                                            "className": "btn-sm btn-danger"
                                        }
                                    }
                                });
                            }
                        }
                        return false;
                        // ]]>
                    });
                }
                return false;
            })
        });
	</script>
</body>

</html>

